<template>
  <div class="hada-process">
    <div
        class="process-bar-outer"
        ref="outer"
        :style="outerStyle"
        @mousedown="handleOuter">
      <div class="process-bar-inner" :style="innerStyle"></div>
      <div class="process-bar-slider" :style="sliderStyle"></div>
    </div>
    <div class="show-text">
      <el-input-number class="show-input" v-model="inputValue" :controls="false" :min="0" :max="100" @change="inputChange"></el-input-number>%
    </div>
  </div>


</template>

<script lang="ts" setup>
import {onMounted, ref, defineProps, defineEmits, computed, onUnmounted, watchEffect} from "vue";

const props = withDefaults(defineProps<{
  modelValue: number,
  width?: number,
  height?: number,
  sliderWidth?: number
}>(),{
  modelValue: 0,
  width: 150,
  height: 6,
  sliderWidth: 10
});

const emit = defineEmits(['update:modelValue'])
const currPos = ref(Math.round(props.width * +props.modelValue / 100));

const inputValue = ref(0);
inputValue.value = +props.modelValue;


console.log(currPos,'currPos')
const space = (props.sliderWidth - props.height) / 2;
let outerOffsetLeft: number;
let outer = ref(null);
let sliding = false;

const outerStyle = {
  width: props.width + 'px',
  height: props.height + 'px',
  borderRadius: props.height + 'px'
}
const innerStyle = computed(() => {
  return {
    width: currPos.value + 'px',
    borderRadius: props.height + 'px'
  }
})
const sliderStyle = computed(() => {
  return {
    width: props.sliderWidth + 'px',
    height: props.sliderWidth + 'px',
    top: -space + 'px',
    left: currPos.value - (props.sliderWidth / 2) + 'px'
  }
})

const handleOuter = (e: MouseEvent) => {
  sliding = true;
  currPos.value = handleBoundary(e.clientX - outerOffsetLeft);

  document.addEventListener('mousemove', handlMousemove)
  document.addEventListener('mouseup', handlMouseup)
}

const handleBoundary = (value: number) => {
  value = Math.min(props.width, value);
  value = Math.max(0, value);
  emit('update:modelValue', Math.round(value / props.width * 100))
  return value;
}

const handlMousemove = (e:MouseEvent) => {
  if (sliding) {
    currPos.value = handleBoundary(e.clientX - outerOffsetLeft)
  }
}

const handlMouseup = (e:MouseEvent) => {
  sliding = false;
  currPos.value = handleBoundary(e.clientX - outerOffsetLeft)

  emit('confirm', Math.round(e.clientX - outerOffsetLeft / props.width * 100))

  document.removeEventListener('mousemove', handlMousemove)
  document.removeEventListener('mouseup', handlMouseup)
}

const inputChange = ()=>{
  emit('confirm', +inputValue.value)
}

onMounted(() => {
  outerOffsetLeft = (outer.value as any).getBoundingClientRect().left;
  watchEffect(()=>{
    inputValue.value = +props.modelValue;
    currPos.value = Math.round(props.width * props.modelValue / 100);
  })
  watchEffect(()=>{
    let value = +inputValue.value;
    value = Math.min(100, value);
    value = Math.max(0, value);
    inputValue.value = value;
    emit('update:modelValue', Math.round(value))
  })
})

</script>

<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
.hada-process{
  display: flex;
  align-items: center;

  .show-text{
    margin-left: 20rpx;
    display: flex;
    align-items: center;
    .show-input{
      width: 140rpx;
      padding: 0 10rpx;
      margin-right: 10rpx;
    }
  }

  .process-bar-outer {
    caret-color: rgba(0,0,0,0);
    position: relative;
    background-color: #ebeef5;


    .process-bar-inner {
      height: 100%;
      background-color: #409eff;
    }

    .process-bar-slider {
      position: absolute;
      border-radius: 50%;
      border: 1.6px solid #409EFF;
      background-color: #ffffff;
    }
  }
}

</style>
